<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		html,body{
			width:100%;
		}
		
		header,footer {
			height: 24px;
			line-height: 24px;
			background-color: #ff5658;
			text-align: center;
		}
		section{
			overflow: scroll;
		}
		section>div{
			height: 100px;
		}
	</style>
</head>

<body>
	<header>的减肥的时间放假圣诞节爱疯啊</header>
	<section id='main'>
		<input type="text" >
		<div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<input type="text" >
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div><div>eeee</div>
		<div>222</div>
		<div>333</div>
		<div>4444</div>
		

	</section>
	<footer>jdjjdjjf；落多少发来的数量；爱疯</footer>
</body>
<script>
	// var height=window.screen.availHeight;
	var height=window.innerHeight;
	alert(height);
	document.querySelector("body").style.height=height+'px';
	document.querySelector("#main").style.height=(height-48)+'px';

	var inputs=document.querySelectorAll("input");
	console.log(inputs);
	// inputs.forEach(function(ele,idx){
	// 	console.log(ele)
	// 	ele.addEventListener("focus",function(){
	// 		alert(window.innerHeight);

	// 	})
	// 	ele.addEventListener("blur",function(){
	// 		alert(window.innerHeight);

	// 	})
	// })
	
</script>
</html>